/**
 * 登录页
 * **/
import React, { useState } from 'react';
import { Button, Form, Input, Checkbox, Radio } from '@arco-design/web-react';
import { useNavigate } from 'react-router-dom';
import '@arco-design/web-react/dist/css/arco.css';
import './index.css';

const FormItem = Form.Item;

// 表单参数类型
type FromValue = {
  userName: string;
  passWord: string;
};

function Loading() {
  const navigare = useNavigate();
  const [remember, setRemember] = useState<boolean>(true);

  // 记住密码选择事件
  const onRememberChange = (e: boolean) => {
    setRemember(e);
  };

  // 点击登录事件
  const handleSubmit = (values: FromValue) => {
    console.log(remember);
    console.log('接口', values);
    navigare('/');
    localStorage.setItem('token', '1');
  };
  return (
    <div className="login-body">
      <div>
        {/* autoComplete 不填充 */}
        <Form autoComplete="off" layout="vertical" onSubmit={handleSubmit}>
          <FormItem
            label="用户名"
            field="userName"
            rules={[{ required: true }]}
          >
            <Input placeholder="请输入" style={{ width: '100%' }}></Input>
          </FormItem>
          <FormItem label="密码" field="passWord" rules={[{ required: true }]}>
            <Input.Password
              placeholder="请输入"
              style={{ width: '100%' }}
            ></Input.Password>
          </FormItem>
          <FormItem label="记住密码">
            <Checkbox checked={remember} onChange={onRememberChange}>
              是
            </Checkbox>
            {/* <Checkbox checked={!remember} onChange={(e) => onRememberChange(!e)}>
            否
          </Checkbox> */}
          </FormItem>
          <Button type="primary" htmlType="submit">
            登录
          </Button>
        </Form>
      </div>
    </div>
  );
}

export default Loading;
